<template>
  <view>
    <template v-if="currentTabbar === 0">
      <page-a />
    </template>
    <template v-else-if="currentTabbar === 1">
      <page-b />
    </template>
    <template v-else-if="currentTabbar === 2">
      <page-c />
    </template>
    <template v-else-if="currentTabbar === 3">
      <page-d />
    </template>
    <template v-else-if="currentTabbar === 4">
      <page-f />
    </template>
    <TnTabbar v-model="currentTabbar" fixed switch-animation>
      <TnTabbarItem
          v-for="(item, index) in tabbarData"
          :key="index"
          :icon="item.icon"
          :active-icon="item.activeIcon"
          :text="item.name"
          :bulge="index === 2"
          bulge-bg-color="tn-gradient__cool-6"
      />
    </TnTabbar>
  </view>
</template>

<script setup>
  import TnTabbar from '../../uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue';
  import TnTabbarItem from '../../uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue';
  import {ref} from 'vue';
  import PageA from "./components/pageA.vue";
  import PageB from "./components/pageB.vue";
  import PageC from "./components/pageC.vue";
  import PageD from "./components/pageD.vue";
  import PageF from "./components/pageF.vue";
  import {onShareAppMessage} from '@dcloudio/uni-app'

  onShareAppMessage(() => {
    return {
      title: '赛迷小助手',
      imageUrl: 'https://seerforwdw.info/seer-image/diduo.jpg',
      path: '/pages/index/index'
    }
  })


  const currentTabbar = ref(0)

  // 导航栏数据
  const tabbarData = [
    {
      name: '精灵',
      type: 'image',
      icon: '/static/tabbar/1_7.png',
      activeIcon: '/static/tabbar/1_1.png'
    },
    {
      name: '刻印',
      type: 'image',
      icon: '/static/tabbar/1_9.png',
      activeIcon: '/static/tabbar/1_12.png'
    },
    {
      name: '工具',
      type: 'image',
      icon: 'https://seerforwdw.info/seer-image/tabbar/0_0.png',
      activeIcon: 'https://seerforwdw.info/seer-image/tabbar/0_1.png',
      bulgeBgColor: '#fff3dd'
    },
    {
      name: '套装',
      type: 'image',
      icon: '/static/tabbar/1_11.png',
      activeIcon: '/static/tabbar/1_8.png',
    },
    {
      name: '我的',
      type: 'image',
      icon: '/static/tabbar/1_10.png',
      activeIcon: '/static/tabbar/1_6.png'
    }
  ]
</script>

<style scoped lang="less">
  /deep/[class*=tn-gradient-bg] {
    background-image: none;
  }
</style>
